<template>
	<div :class="classes" :style="styles">
		<slot></slot>
	</div>
</template>
<script lang="ts">
	import Anes from "../base";
	import { Prop, Emit, Component, Watch, Mixins } from "vue-property-decorator";
	import { findComponentsUpward } from "../../utils/assist";
	import Row from "./row.vue";
	const prefixCls = "ivu-col";
	@Component
	export default class Col extends Mixins(Anes) {
		@Prop() span!: [number, string];
		@Prop() order!: [number, string];
		@Prop() offset!: [number, string];
		@Prop() push!: [number, string];
		@Prop() pull!: [number, string];

		@Prop() className!: string;
		@Prop() xs!: [number, object];
		@Prop() sm!: [number, object];
		@Prop() md!: [number, object];
		@Prop() lg!: [number, object];
		@Prop() xl!: [number, object];
		@Prop() xxl!: [number, object];

		gutter = 0;

		get classes() {
			const classList = [
				`${prefixCls}`,
				{
					[`${prefixCls}-span-${this.span}`]: this.span,
					[`${prefixCls}-order-${this.order}`]: this.order,
					[`${prefixCls}-offset-${this.offset}`]: this.offset,
					[`${prefixCls}-push-${this.push}`]: this.push,
					[`${prefixCls}-pull-${this.pull}`]: this.pull,
					[`${this.className}`]: !!this.className
				}
			];

			["xs", "sm", "md", "lg", "xl", "xxl"].forEach(size => {
				if (typeof this.$props[size] === "number") {
					classList.push(`${prefixCls}-span-${size}-${this.$props[size]}`);
				} else if (typeof this.$props[size] === "object") {
					const props = this.$props[size];
					Object.keys(props).forEach(prop => {
						classList.push(
							prop !== "span"
								? `${prefixCls}-${size}-${prop}-${props[prop]}`
								: `${prefixCls}-span-${size}-${props[prop]}`
						);
					});
				}
			});

			return classList;
		}
		get styles() {
			let style = {};
			if (this.gutter !== 0) {
				style = {
					paddingLeft: this.gutter / 2 + "px",
					paddingRight: this.gutter / 2 + "px"
				};
			}

			return style;
		}

		updateGutter() {
			const row = findComponentsUpward<Row>(this, "Row");
			if (row && row.length > 0) {
				row[0].updateGutter(row[0].gutter);
			}
		}

		mounted() {
			this.updateGutter();
		}
		beforeDestroy() {
			this.updateGutter();
		}
	}
</script>
